<template>
    <div class="search">
        <div class="top">
            <div class="left">
                <uni-icons class="icon" size="20" custom-prefix="custom-icon" type="search"></uni-icons>
                <input class="input uni-input" @input="change" v-model="name" type="text" placeholder="请输入内容!" />
                <uni-icons
                    class="icon"
                    size="20"
                    custom-prefix="custom-icon"
                    @click="close"
                    v-if="!show"
                    type="close"></uni-icons>
            </div>
            <div class="right" @click="toBack">取消</div>
        </div>
        <div class="first" v-if="showgood">
            <div class="bottom" v-if="show">
                <div class="text">热门搜索</div>
                <div class="cart">
                    <div
                        :class="{ active: num == index }"
                        @click="toGood(item.keyword)"
                        class="box"
                        v-for="(item, index) in hotArr"
                        :key="index">
                        {{ item.keyword }}
                    </div>
                </div>
            </div>
            <div class="list" v-else>
                <div class="ul">
                    <div class="li" @click="toGood(item)" v-for="(item, index) in keyWordArr" :key="index">
                        <div class="left">{{ item }}</div>
                        <div class="right">></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="second" v-else>
            <goods :list="goodArr" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const num = ref<number>(0);
const name = ref<any>('');
const show = ref<boolean>(true);
const showgood = ref<boolean>(true);
import Ajax from '@/api/search';
const hotArr = ref<any>([]);
const keyWordArr = ref<any>([]);
const goodArr = ref<any>([]);
onMounted(() => {
    getList();
});
const getList = async () => {
    let result: any = await Ajax.reqSearch();
    // console.log(result);
    hotArr.value = result.data.hotKeywordVOList;
};
const change = () => {
    // console.log(show.value);
    if (name.value == '') {
        showgood.value = false;
        show.value = true;
    } else {
        showgood.value = true;
        show.value = false;
        getKeyWord();
    }
};
const close = () => {
    name.value = '';
    show.value = true;
};
const getKeyWord = async () => {
    let result = await Ajax.reqKeyWord({ keywordPrefix: name.value });
    // console.log(result);
    if (result.code == 200) {
        keyWordArr.value = result.data;
    }
};
const toBack = () => {
    uni.navigateBack();
};
const toGood = (keyWord: any) => {
    showgood.value = false;
    getGood(keyWord);
};
const getGood = async (keyWord: any) => {
    let result: any = await Ajax.reqGood(keyWord);
    // console.log(result);
    if (result.code == 200) {
        goodArr.value = result.data.directlyList;
        console.log(goodArr.value);
    }
};
</script>

<style scoped lang="less">
.search {
    width: 100%;
    height: 100%;
    background: #eee;
    .top {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: snow;
        margin-top: 20rpx;
        height: 80rpx;
        .left {
            display: flex;
            width: 70%;
            height: 60rpx;
            justify-content: flex-start;
            align-items: center;
            border-radius: 10rpx;
            background: #eee;
            .icon {
                margin-left: 10rpx;
            }
            .input {
                height: 40rpx;
                width: 540rpx;
                display: block;
            }
        }
        .right {
            color: #333;
            font-size: 28rpx;
        }
    }
    .bottom {
        background-color: snow;
        margin: 5rpx 0;
        padding: 20rpx;
        border-radius: 10rpx;
        .text {
            font-size: 28rpx;
            color: #999;
        }
        .cart {
            display: flex;
            flex-wrap: wrap;
            .box {
                color: #333;
                font-size: 24rpx;
                padding: 10rpx;
                margin: 23rpx;
                border: 1px solid #999;
                border-radius: 10rpx;
            }
            .active {
                border: 1px solid red;
                border-radius: 10rpx;
            }
        }
    }
    .list {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .ul {
            margin: 5rpx 0;
            background: snow;
            .li {
                width: 700rpx;
                padding: 20rpx 0;
                border-bottom: 2px solid #eee;
                margin: 0rpx auto;
                display: flex;
                justify-content: space-between;
                flex-wrap: nowrap;
            }
        }
    }
}
</style>
